<template>
    <div>
        <el-button type="primary" round @click="getCarTypeList">添加</el-button>
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="carId"
                label="id"
                width="180">
        </el-table-column>
        <el-table-column
                prop="carName"
                label="车名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="carBuyTime"
                label="时间"
                width="180" :formatter="formatterData">
        </el-table-column>
        <el-table-column
                prop="carPrice"
                label="价格"
                width="180">
        </el-table-column>
        <el-table-column
                prop="carStatus"
                label="状态"
                width="180" :formatter="formatterStatus">
        </el-table-column>
        <el-table-column
                prop="carMileage"
                label="描述"
                width="180">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button @click="update(scope.row.carId)" type="text" size="small">修改</el-button>
                <el-button @click="del(scope.row.carId)" type="text" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog :title="title" :visible.sync="open">
        <el-form :rules="rules" ref="form" :model="form" label-width="80px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="车名" prop="carName">
                        <el-input v-model="form.carName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="类型" :label-width="formLabelWidth" prop="carType">
                        <el-select v-model="form.carType" placeholder="请选择车类型">
                            <el-option :value="0">请选择车类型</el-option>
                            <el-option v-for="type in carTypeList" :key="type.tid" :label="type.name" :value="type.tid"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="价格" prop="carPrice">
                        <el-input v-model="form.carPrice"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="描述" prop="carMileage">
                        <el-input v-model="form.carMileage"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="日期" prop="carBuyTime">
                        <el-date-picker
                                v-model="form.carBuyTime"
                                type="date"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="出售" prop="carStatus">
                        <el-input v-model="form.carStatus"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="open = false">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
    </el-dialog>
    </div>
</template>
<script>
    import {list,add,del,get,update} from "@/api/car";
    import {getAll} from "@/api/carType";
    import moment from "moment";

    export default {
        name:"list-index",
        data() {
            return {
                tableData: [],
                open:false,
                form: {},
                carTypeList: [],
                title: '',
                rules: {
                    carName: [
                        { required: true, message: '请输入名称', trigger: 'blur' }
                    ],
                    carType: [
                        { required: true, message: '请选择类型', trigger: 'change' }
                    ],
                    carPrice: [
                        {required: true, message: '请输入价格', trigger: 'blur' }
                    ],
                    carMileage: [
                        { required: true, message: '请输入描述', trigger: 'blur' }
                    ],
                    carBuyTime: [
                        { required: true, message: '请选择时间', trigger: 'blur' }
                    ],
                    carStatus: [
                        { required: true, message: '请选择状态', trigger: 'blur' }
                    ]
                }
            }
        },
        created() {
           this.loadDate();
            getAll().then(resp =>{
                this.carTypeList=resp;
            })
        },
        methods: {
            loadDate(){
                list().then(result =>{
                    this.tableData=result;
                })
            },
            getCarTypeList() {
                this.open=true;
                this.title='添加用户',
                this.form= {}
            },
            submitForm(){
              this.$refs.form.validate(valid => {
                  if(valid){
                      if(this.form.carId){
                        update(this.form).then(resp =>{
                            if(resp == 1){
                                this.$message.success("修改成功！");
                                this.loadDate();
                            }else {
                                this.$message.error("修改失败！");
                            }
                            this.open=false;
                        })
                      }else {
                          add(this.form).then(resp => {
                              if(resp == 1){
                                  this.$message.success("添加成功！");
                                  this.loadDate();
                              }else {
                                  this.$message.error("添加失败！");
                              }
                              this.open=false;
                          })
                      }
                  }
              })
            },
            update(carId){
               this.open=true;
               this.title='修改用户';
               get(carId).then(resp =>{
                   this.form=resp;
               })
            },
            del(carId){
               del(carId).then(resp =>{
                   if(resp == 1){
                       this.$message.success("删除成功！");
                       this.loadDate();
                   }else {
                       this.$message.error("删除失败！");
                   }
               })
            },
            formatterStatus(row){
                if(row.carStatus == 1){
                    return '已售'
                }else if(row.carStatus ==0){
                    return '未出售'
                }
            },
            formatterData(row){
                var date=row.carBuyTime;
                if(date === undefined){
                    return ''
                }
                return moment(date).format("YYYY-MM-DD")
            }
        }
    }
</script>
<style scoped>

</style>